<template>
	<view class="review">
		<view class="review_icon row">
			<view class="icon_item">
				<image src="/static/review/icon_01.png" mode=""></image>
				<p>terrible</p>
			</view>
			<view class="icon_item">
				<image src="/static/review/icon_02.png" mode=""></image>
				<p>bad</p>
			</view>
			<view class="icon_item">
				<image src="/static/review/icon_03.png" mode=""></image>
				<p>average</p>
			</view>
			<view class="icon_item">
				<image src="/static/review/icon_04.png" mode=""></image>
				<p>good</p>
			</view>
			<view class="icon_item">
				<image src="/static/review/icon_05.png" mode=""></image>
				<p>wonderful</p>
			</view>
		</view>
		<view class="rate row">
			<text style="margin-right: 12rpx;">rate</text>
			<u-rate :count="5" size="38" v-model="score" gutter="14">></u-rate>
		</view>
		<view class="review_textarea">
			<textarea v-model="content" name="" id="" cols="30" rows="10"
				placeholder="Everyone is asking: Is the transportation of the house convenient, what is the attitude of the landlord, is the house clean and tidy"></textarea>
		</view>
		<view class="review_check">
			<text>{{ $t('check.in') }}</text>
			<view class="row" @click.stop="isShow=true">
				<text>{{checkin_time||'Please choose'}}</text>
				<u-icon name="arrow-right"></u-icon>
			</view>

		</view>
		<!-- <view class="review_img">
			<ul>
				<li v-for="(item,index) in imgUrl" :key="index">
					<image class="photo" :src="item" mode="aspectFill"></image>
					<image class="close" @click.stop="onClose(index)" src="/static/review/icon_close.png" mode="">
					</image>
				</li>
				<li class="photo" @click.stop="handleUpload">
					<image src="/static/review/icon_photo.png" mode=""></image>
					<p>Upload photos</p>
				</li>
			</ul>
		</view> -->
		<view class="review_img">
			<p style="padding-bottom:30rpx">Upload photos</p>
			<u-upload :fileList="imgUrl" @afterRead="afterRead" @delete="deletePic" multiple :maxCount="9"></u-upload>
		</view>
		<button @click.stop="handleSubmit">{{$t('submit.submitButton')}}</button>
		<u-datetime-picker ref="defaultPicker" mode="date" :show="isShow" :value="checkin_time"
			@confirm="onConfirmPicker" :cancelText="$t('text.cancel')" :confirmText="$t('text.confirm')"></u-datetime-picker>
	</view>
</template>

<script>
	import {
		getReview,
		policy
	} from '@/lib/service';
	import {
		showMessage,
		showFailure,
		showSuccess
	} from '../../lib/helper';
	export default {
		data() {
			return {
				content: "",
				score: 0,
				imgUrl: [],
				date: '',
				isShow: false,
				checkin_time: Number(new Date()),
                houseid:"",
				reserveid:"",
			}
		},
		async onLoad(options) {
			// this.houseid = options.houseid;
			this.reserveid = options.reserveid;
			let timeValue = await uni.$u.timeFormat(this.checkin_time, 'yyyy-mm-dd');
			this.checkin_time = timeValue;
		},
		methods: {
			deletePic(event) {
				this.imgUrl.splice(event.index, 1);
			},
			async onConfirmPicker(e) {
				let timeValue = await uni.$u.timeFormat(e.value, 'yyyy-mm-dd');
				this.checkin_time = timeValue;
				this.isShow = false

			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file);
				let fileListLen = this.imgUrl.length;
				lists.map((item) => {
					this.imgUrl.push({
						...item,
						status: 'uploading',
						message: '上传中'
					});
				});
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i]);
					let item = this.imgUrl[fileListLen];
					this.imgUrl.splice(
						fileListLen,
						1,
						Object.assign(item, {
							status: 'success',
							message: '',
							url: result
						})
					);
					fileListLen++;
				}
			},
			uploadFilePromise(file) {
				let name = file.name ? file.name : file.url.split('/').pop();
				return new Promise((resolve, reject) => {
					policy('house', name).then((res) => {
						let a = uni.uploadFile({
							url: res.data.signedUrl, // 仅为示例，非真实的接口地址
							filePath: file.url,
							name: 'file',
							success: (res) => {
								try {
									var data = JSON.parse(res.data);
									resolve(data.data);
								} catch (e) {
									console.log(e);
								}
							}
						});
					});
				});
			},
			// 确认评论
			handleSubmit() {
				let _this = this;
				if (this.score <= 0) {
					showMessage('The rating cannot be empty');
					return;
				}
				if (!this.content) {
					showMessage('Comments cannot be empty');
					return;
				}
				var imgurl = this.imgUrl.map((item) => item.url)||[];
				if (imgurl.length > 0) {
					imgurl = imgurl.join(',');
					}else{
						imgurl = null
					}
				let obj = {
					reserveid:Number(this.reserveid),
					content: this.content,
					score: this.score,
					imgurl,
					checkin_time: this.checkin_time,
				}
				getReview(obj).then((res) => {
					showSuccess();
					setTimeout(() => {
							uni.navigateBack()
						}, 1000)
					})
					.catch((err) => {
						uni.hideLoading();
						showFailure();
					});
					}

				}
			}
</script>

<style lang="scss" scoped>
	.review_icon {
		justify-content: center;
		margin-top: 50rpx;

		.icon_item {
			text-align: center;
			margin-left: 30rpx;

			image {
				width: 36rpx;
				height: 36rpx;
			}

			p {
				margin-top: 10rpx;
				font-family: Microsoft YaHei UI;
				font-weight: 400;
				font-size: 24rpx;
				color: #CECECE;
				line-height: 28rpx;
			}
		}

	}

	.rate {
		padding: 30rpx 40rpx;
	}

	.review_textarea {
		padding: 0 36rpx;
		font-size: 30rpx;
		color: #CECECE;
		line-height: 46rpx;

		textarea {
			width: 100%;
		}

	}

	.review_check {
		padding: 36rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		text {
			font-size: 32rpx;
			color: #CECECE;
		}
	}

	.review_img {
		margin: 0 36rpx;

		ul {
			display: flex;

			li {
				position: relative;
				z-index: 1;
				margin-right: 30rpx;

				.photo {
					width: 180rpx;
					height: 180rpx;
					z-index: 2;
				}

				.close {
					width: 28rpx;
					height: 28rpx;
					position: absolute;
					top: 0;
					right: 0;
					z-index: 3;
				}
			}

			.photo {
				width: 180rpx;
				height: 180rpx;
				background: #F6F6F6;
				text-align: center;

				image {
					width: 56rpx;
					height: 53rpx;
					margin-top: 46rpx;
				}

				p {
					font-family: Microsoft YaHei UI;
					font-weight: 400;
					font-size: 22rpx;
					color: #CECECE;
					line-height: 28rpx;
				}
			}
		}
	}

	button {
		width: 80%;
		height: 88rpx;
		margin: 0 66rpx;
		line-height: 88rpx;
		background-color: #FF3C15;
		color: #FFFFFF;
		border-radius: 36rpx;
		margin-top: 30rpx;
	}
</style>